<div class="bg-f8 full-parent">
  <div class="panel-body full-parent container">
    <div class="flex flex-column">
      <div class="flex1 relative">
        <div nz-row nzGutter="16" class="full-parent">
          <div nz-col class="gutter-row h100" nzSpan="12">
            <div class="gutter-box h100">
              <div class="flex flex-column b bg-white p-15">
                <div class="flex0 flex-basic mb-20">
                  <p>终端01
                    <nz-tag [nzColor]="states['client01']?.state === 'Online'?'green':'red'" class="ml-20">{{states['client01']?.state === 'Online'?'连接中':'未连接'}}</nz-tag>
                  </p>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client01']?.state !== 'Online'" (click)="getLog1('1')">指令1</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client01']?.state !== 'Online'" (click)="getLog1('2')">指令2</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client01']?.state !== 'Online'" (click)="getLog1('3A')">指令3A</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client01']?.state !== 'Online'" (click)="getLog1('3B')">指令3B</button>
                  <button nz-button nzType="default" class="mr-20" (click)="logData1 = ''"><i nz-icon [iconfont]="'icon-clean'"></i> 清空日志</button>
                </div>
                <div class="flex1 relative">
                  <div class="full-parent">
                    <ngx-monaco-editor style="height: 100%;" [options]="editorOptions" (onInit)="logEditor1Init($event)"
                                       [model]="{language:'c'}" [ngModel]="logData1"></ngx-monaco-editor>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div nz-col class="gutter-row h100" nzSpan="12">
            <div class="gutter-box h100">
              <div class="flex flex-column b bg-white p-15">
                <div class="flex0 flex-basic mb-20">
                  <p>终端02
                    <nz-tag [nzColor]="states['client02']?.state === 'Online'?'green':'red'" class="ml-20">{{states['client02']?.state === 'Online'?'连接中':'未连接'}}</nz-tag>
                  </p>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client02']?.state !== 'Online'" (click)="getLog2('1')">指令1</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client02']?.state !== 'Online'" (click)="getLog2('2A')">指令2A</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client02']?.state !== 'Online'" (click)="getLog2('2B')">指令2B</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client02']?.state !== 'Online'" (click)="getLog2('2C')">指令2C</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client02']?.state !== 'Online'" (click)="getLog2('3')">指令3</button>
                  <button nz-button nzType="default" class="mr-20" (click)="logData2 = ''"><i nz-icon [iconfont]="'icon-clean'"></i> 清空日志</button>
                </div>
                <div class="flex1 relative">
                  <div class="full-parent">
                    <ngx-monaco-editor style="height: 100%;" [options]="editorOptions" (onInit)="logEditor2Init($event)"
                                       [model]="{language:'c'}" [ngModel]="logData2"></ngx-monaco-editor>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex1 relative mt-20">
        <div nz-row nzGutter="16" class="full-parent">
          <div nz-col class="gutter-row h100" nzSpan="12">
            <div class="gutter-box h100">
              <div class="flex flex-column b bg-white p-15">
                <div class="flex0 flex-basic mb-20">
                  <p>终端03
                    <nz-tag [nzColor]="states['client03']?.state === 'Online'?'green':'red'" class="ml-20">{{states['client03']?.state === 'Online'?'连接中':'未连接'}}</nz-tag>
                  </p>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client03']?.state !== 'Online'" (click)="getLog3('1A')">指令1A</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client03']?.state !== 'Online'" (click)="getLog3('1B')">指令1B</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client03']?.state !== 'Online'" (click)="getLog3('1C')">指令1C</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client03']?.state !== 'Online'" (click)="getLog3('1D')">指令1D</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['client03']?.state !== 'Online'" (click)="getLog3('2')">指令2</button>
                  <button nz-button nzType="default" class="mr-20" (click)="logData3 = ''"><i nz-icon [iconfont]="'icon-clean'"></i> 清空日志</button>
                </div>
                <div class="flex1 relative">
                  <div class="full-parent">
                    <ngx-monaco-editor style="height: 100%;" [options]="editorOptions" (onInit)="logEditor3Init($event)"
                                       [model]="{language:'c'}" [ngModel]="logData3"></ngx-monaco-editor>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div nz-col class="gutter-row h100" nzSpan="12">
            <div class="gutter-box h100">
              <div class="flex flex-column b bg-white p-15">
                <div class="flex0 flex-basic mb-20">
                  <p>Swift03
                    <nz-tag [nzColor]="states['swift03']?.state === 'Online'?'green':'red'" class="ml-20">{{states['swift03']?.state === 'Online'?'连接中':'未连接'}}</nz-tag>
                  </p>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['swift03']?.state !== 'Online'" (click)="getLog4('Bat-lock')">Bat-lock</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['swift03']?.state !== 'Online'" (click)="getLog4('Bat-unlock')">Bat-unlock</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['swift03']?.state !== 'Online'" (click)="getLog4('Pac-lock')">Pac-lock</button>
                  <button nz-button nzType="primary" class="mr-20" [disabled]="states['swift03']?.state !== 'Online'" (click)="getLog4('Pac-unlock')">Pac-unlock</button>
                  <button nz-button nzType="default" class="mr-20" (click)="logData4 = ''"><i nz-icon [iconfont]="'icon-clean'"></i> 清空日志</button>
                </div>
                <div class="flex1 relative">
                  <div class="full-parent">
                    <ngx-monaco-editor style="height: 100%;" [options]="editorOptions" (onInit)="logEditor4Init($event)"
                                       [model]="{language:'c'}" [ngModel]="logData4"></ngx-monaco-editor>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!--<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">-->
    <!--<nz-tab [nzTitle]="'终端01'">-->
    <!--<div class="flex flex-column">-->
    <!--<div class="flex0 flex-basic mb-20">-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令2</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令3A</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令3B</button>-->
    <!--</div>-->
    <!--<div class="flex1 relative">-->
    <!--<div class="full-parent">-->
    <!--<ngx-monaco-editor style="height: 100%;" [options]="editorOptions"-->
    <!--[model]="{language:'c'}" [ngModel]="logData1"></ngx-monaco-editor>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</nz-tab>-->
    <!--<nz-tab [nzTitle]="'终端02'">-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令2A</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令2B</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令2C</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令3</button>-->
    <!--</nz-tab>-->
    <!--<nz-tab [nzTitle]="'终端03'">-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1A</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1B</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1C</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令1D</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">指令2</button>-->
    <!--</nz-tab>-->
    <!--<nz-tab [nzTitle]="'Swift03'">-->
    <!--<button nz-button nzType="primary" class="mr-20">Bat-lock</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">Bat-unlock</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">Pac-lock</button>-->
    <!--<button nz-button nzType="primary" class="mr-20">Pac-unlock</button>-->
    <!--</nz-tab>-->
    <!--</nz-tabset>-->
  </div>
</div>
